<template>
  <div class="statistics-wrapper">
    <type-switch @changeIndex="changeType" />
    <div class="bar-chart-area">
      <bar-chart :type="calType" :data="scoresStatistics" :update="barUpdate"></bar-chart>
    </div>
    <div class="grid-container">
      <van-grid :gutter="12" :column-num="3" clickable class="custom-grid">
        <van-grid-item use-slot v-for="(item,index) in scoreList" :key="index">
          <div class="grid-area">
            <div class="grid-area-score">{{ item.value }}</div>
            <div class="grid-area-title">{{ item.title }}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="daka-count-title">打卡次数</div>

    <div class="line-chart-area">
      <line-chart :data="dakaStatistics" :update="lineUpdate"></line-chart>
    </div>
    <div class="grid-container">
      <van-grid :gutter="12" :column-num="3" clickable class="custom-grid">
        <van-grid-item use-slot v-for="(item,index) in dakaList" :key="index">
          <div class="grid-area">
            <div class="grid-area-score">{{ item.value }}</div>
            <div class="grid-area-title">{{ item.title }}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import typeSwitch from "./components/typeSwitch";
import barChart from "./components/barChart/barChart";
import lineChart from "./components/lineChart/lineChart";
import cloudHandler from '../../cloud/index';
export default {
  data() {
    return {
      index: 0,
      totalScoreFrequency: "0", // 总共得分次数
      examFrequency: "0", // 考试次数
      mockExamFrequency: "0", // 模拟次数
      maxExamScore: "0.0", // 最高得分
      achieveTheGoal: "否", // 是否达到目标
      averageScore: "0.0", // 模拟平均得分
      totalDaka: "0", // 总打卡次数
      dakaDay: "0", // 打卡天数
      listeningDaka: "0", // 听力打卡
      speakingDaka: "0", // 口语打卡
      readingDaka: "0", // 阅读打卡
      writingDaka: "0", // 写作打卡
      dakaStatistics: {},
      scoresStatistics: {},
      barUpdate: false,
      lineUpdate: false
    };
  },
  computed: {
    calType() {
      const typeList = ["all", "listening", "reading", "writing", "speaking"];
      return typeList[this.index];
    },
    scoreList() {
      return [
        {
          title: "总共得分次数",
          value: this.totalScoreFrequency
        },
        {
          title: "考试次数",
          value: this.examFrequency
        },
        {
          title: "模拟次数",
          value: this.mockExamFrequency
        },
        {
          title: "最高得分",
          value: this.maxExamScore
        },
        {
          title: "是否达到目标",
          value: this.achieveTheGoal
        },
        {
          title: "平均得分",
          value: this.averageScore
        }
      ];
    },
    dakaList() {
      return [
        {
          title: "总共打卡",
          value: this.totalDaka
        },
        {
          title: "打卡天数",
          value: this.dakaDay
        },
        {
          title: "听力打卡",
          value: this.listeningDaka
        },
        {
          title: "口语打卡",
          value: this.speakingDaka
        },
        {
          title: "阅读打卡",
          value: this.readingDaka
        },
        {
          title: "写作打卡",
          value: this.writingDaka
        }
      ];
    },
  },
  methods: {
    getBaseData() {
      // 获取点的数据
      cloudHandler.getStatistics()
      .then(data => {
         data = data.body;
         this.totalScoreFrequency = data.totalScore;
         this.examFrequency = data.examCount;
         this.mockExamFrequency = this.totalScoreFrequency - this.examFrequency;
         this.maxExamScore = data.maxScore;
         this.averageScore = data.averageScore;
         this.totalDaka = data.totalDakaCount;
         this.dakaDay = (data.dakaDay && data.dakaDay.length) || 0;
         this.listeningDaka = data.cardUseScores.listening;
         this.speakingDaka = data.cardUseScores.speaking;
         this.readingDaka = data.cardUseScores.reading;
         this.writingDaka = data.cardUseScores.writing;
      })
      .catch(err => {
        console.log(err);
      })
    },
    getDakaStatistics() {
      cloudHandler.getDakaStatistics()
      .then((res) => {
        this.dakaStatistics = res.body;
      })
      .catch(err => {
        console.log(err);
      })
    },
    getScoreStatistics(type) {
      cloudHandler.getScoresStatistics(type)
      .then((res) => {
        this.scoresStatistics = res.body;
      })
    },
    changeType(index) {
      this.index = index;
      this.getScoreStatistics(this.calType);
    }
  },
  components: {
    typeSwitch,
    barChart,
    lineChart
  },
  created() {
    this.getBaseData();
    this.getDakaStatistics();
    this.getScoreStatistics();
  },
  onShow() {
    this.barUpdate = true;
    this.lineUpdate = true;
    setTimeout(() => {
          this.barUpdate = false;
    this.lineUpdate = false;
    }, 50)
  }
};
</script>

<style lang="less" scoped>
.statistics-wrapper {
  background: rgba(247, 248, 250, 1);
  min-height: 100vh;
  .bar-chart-area,
  .line-chart-area {
    background: #fff;
    margin: 0 28px 10px 28px;
    box-shadow: 0px 9px 18px 0px rgba(220, 221, 224, 1);
    border-radius: 8px;
    height: 151px;
    overflow: hidden;
  }
  .line-chart-area {
    height: 158px;
  }
  .grid-container {
    margin: 0 16px;
  }

  .grid-area {
    width: 100%;
    padding: 16px 0 11px 14px;
    box-sizing: border-box;
    .grid-area-score {
      color: #3d475c;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 7px;
    }
    .grid-area-title {
      font-size: 12px;
      color: #9da3ac;
    }
  }
  .daka-count-title {
    margin-left: 43px;
    margin-bottom: 13px;
    font-size: 16px;
    color: #3D475C;
    margin-top: 9px;
    font-weight:600;
  }
}
</style>
